<template>
  <div>
    <!-- 父子组件传值
      注意点：单向数据流（堆可以修改，栈不可修改）（基本数据类型不可修改，复杂数据类型，只要不修改它的栈，它的堆随便修改）
    
     -->
    <h3>{{ num }}</h3>
    <!-- <TestNum :numSon="num" @update:numSon="num = $event"></TestNum> -->
    <TestNum :numSon.sync="num"></TestNum>
    <input type="text" />
    <button @click="btnClick">调用文章详情</button>
    <pre ref="pre">
        <code>  1    2   33</code>
        <code>  4</code>
        <code>4       56</code>
    </pre>
  </div>
</template>
<script>
// highlight.highlightAll()  会找到页面上所有pre code 的标签加入一些样式，使用前我们需要导入css
// highlight.highlightElement(dom)
import { articlesInfo } from '@/api/article.js'
export default {
  data () {
    return {
      num: 0
    }
  },
  created () {
    let arr = [{ a: 1, b: 2 }]
    console.log('测试', arr[0].a)
    arr[0].a = 999
  },
  mounted () {
    // highlight.highlightAll()
    // highlight.highlightElement(this.$refs.pre)
  },
  methods: {
    async btnClick () {
      const res = await articlesInfo('8206')
      console.log('详情：', res)
    }
  }
}
</script>
<style></style>
